<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width"/>
    <title>#(WEB_TITLE ?? '网站名称未设置')#(isBlank(SEO_TITLE) ? '': '-' + SEO_TITLE)</title>
    <meta name="keywords" content="#(SEO_KEYWORD ?? WEB_META_KEYWORD)">
    <meta name="description" content="#(SEO_DESC ?? WEB_META_DESC)">
    <META NAME="robots" CONTENT="all">
    <META NAME="title" CONTENT="#(WEB_TITLE ?? '未设置')#(isBlank(SEO_TITLE) ? '': '-' + SEO_TITLE)">
    <link rel="stylesheet" href="/static/public/libs/layui-v2.5.6/layui/css/layui.css">
    <link href="/static/public/libs/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/themes/dolphin/css/index_style.css" rel="stylesheet" type="text/css">
    <link href="/static/themes/dolphin/css/animate.min.css" rel="stylesheet" type="text/css">
    <style>
        .header {
            margin: 0 auto;
            width: 100%;
            height: 100%;
            background-color: #2E2E2E;
            position: fixed !important;
            background-size: 100% 100%
        }
    </style>
</head>
<body>
<div id="menu" class="hover_animation menu_open" data-mark="false">
    <span></span>
    <span></span>
    <span></span>
</div>
<div id="navgation" class="navgation navgation_close">
    <ul class="point">
        <li><a href="/">首页</a></li>
        <li><a href="/articleList">博客</a></li>
        <li><a href="/page/message">留言</a></li>
    </ul>
    <div class="logo"><a>#option('Dolphin_Web_logo','未设置')</a></div>
</div>
<div class="section" id="section1">
    <div class="header">
        <canvas id="canvas">你的浏览器不支持canvas</canvas>
    </div>
    <div class="fp-tablecell">
        <div class="page1">
            <div class="nav wow zoomIn" data-wow-duration="2s">
                <h1>#(WEB_TITLE ?? '网站名称未设置')</h1>
                <p>  #wordRandom()
                </p>
                <a class="layui-btn layui-btn-normal" style="margin-top: 20px" href="/articleList">Enter Blog</a>
            </div>
            <a class="next wow fadeInUp" data-wow-duration="2s" id="next"></a>
        </div>
    </div>
</div>
<div class="section" id="section2" style="background-color: #fff">
    <div class="fp-tablecell">
        <div class="page2">
            <div class="warp-box">
                <div class="new-article">
                    <div class="inner wow fadeInDown" data-wow-delay=".2s">
                        <h1>热门最新文章</h1>
                        <p>
                            #wordRandom()
                        </p>
                    </div>
                </div>
                <div class="layui-row">
                    #latestArticle(count=3)
                    #for(article : articles)
                    <div class="layui-col-xs12 layui-col-sm4 layui-col-md4  wow fadeInUp" style="padding: 0 10px">
                        <div class="single-news">
                            <div class="news-head">
                                <img src="#(article.thumbnail ?? 'https://cdn.seovx.com/?mom=302')">
                                <a href="#(article.url)" class="link"><i class="fa fa-link"></i></a>
                            </div>
                            <div class="news-content">
                                <h4>
                                    <a href="#(article.url)">
                                        #(article.title)
                                    </a>
                                </h4>
                                <div class="date">
                                    #(article.createTime)
                                </div>
                                <p>
                                    #(article.summary) </p>
                                <a href="#(article.url)" class="btn">
                                    阅读更多
                                </a>
                            </div>
                        </div>
                    </div>
                    #else
                    还未产生文章~
                    #end
                    #end
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section3">
    <div class="fp-tablecell">
        <div class="page3">
            <div class="warp-box">
                <div class="warp">
                    <div class="inner">
                        <div class="links">
                            <ul>
                                <li class="wow fadeInLeft"><a href="/page/about">关于</a></li>
                                <li class="wow fadeInRight"><a href="/page/link">+友情链接</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section" id="section4">
    <div class="fp-tablecell">
        <div class="page4">
            <div class="warp-box">
                <div class="about">
                    <div class="inner">
                        <h1 class="wow fadeInLeft">#(WEB_TITLE ?? '网站名未设置')</h1>
                        <p class="wow fadeInRight">
                            #wordRandom()
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<footer class="footer wow fadeInUp" id="contact">
    <div class="footer-top">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget about">
                        <div class="footer-logo">
                            <h2>#(WEB_TITLE ?? '网站名未设置')</h2>
                        </div>
                        <p>  #wordRandom()</p>
                        <div class="button">
                            <a href="/page/about" class="btn layui-btn layui-btn-normal">About Me</a>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
                    <div class="single-widget">
                        <h2>相关链接</h2>
                        <ul class="social-icon">
                            #menus()
                            #for(menu : menus)
                            <li class="active"><a href="#(menu.url ??)"><i
                                    class="icon layui-icon fa #(menu.icon ??)"></i>#(menu.name ??)</a></li>
                            #end
                            #end
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="copyright">
        <div class="container">
            <div class="layui-row">
                <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 text-center">
                    <p> #option('WEB_COPYRIGHT', 'Copyright dolphin')</p>
                </div>
            </div>
        </div>
    </div>
</footer>
<script src="/static/public/libs/layui-v2.5.6/layui/layui.js"></script>
<script src="/static/themes/dolphin/js/wow.min.js"></script>
<script src="/static/themes/dolphin/js/index.js"></script>
<script>
    var WINDOW_WIDTH = document.body.offsetWidth;
    var WINDOW_HEIGHT = document.body.offsetHeight;
    var canvas, context;
    var num = 500;
    var stars = [];
    var mouseX = WINDOW_WIDTH / 2;
    var mouseY = WINDOW_HEIGHT / 2;
    var rnd;
    window.onload = function () {
        canvas = document.getElementById('canvas');
        canvas.width = WINDOW_WIDTH;
        canvas.height = WINDOW_HEIGHT;
        context = canvas.getContext('2d');
        addStar();
        setInterval(render, 33);
        liuxing();
        document.body.addEventListener('mousemove', mouseMove);
    }

    function liuxing() {
        var time = Math.round(Math.random() * 3000 + 33);
        setTimeout(function () {
            rnd = Math.ceil(Math.random() * stars.length)
            liuxing();
        }, time)
    }

    function mouseMove(e) {
        mouseX = e.clientX;
        mouseY = e.clientY;
    }

    function render() {
        context.fillStyle = 'rgba(0,0,0,0.1)';
        context.fillRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
        for (var i = 0; i < num; i++) {
            var star = stars[i];
            if (i == rnd) {
                star.vx = -5;
                star.vy = 20;
                context.beginPath();
                context.strokeStyle = 'rgba(255,255,255,' + star.alpha + ')';
                context.lineWidth = star.r;
                context.moveTo(star.x, star.y);
                context.lineTo(star.x + star.vx, star.y + star.vy);
                context.stroke();
                context.closePath();
            }
            star.alpha += star.ra;
            if (star.alpha <= 0) {
                star.alpha = 0;
                star.ra = -star.ra;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            } else if (star.alpha > 1) {
                star.alpha = 1;
                star.ra = -star.ra
            }
            star.x += star.vx;
            if (star.x >= WINDOW_WIDTH) {
                star.x = 0;
            } else if (star.x < 0) {
                star.x = WINDOW_WIDTH;
                star.vx = Math.random() * 0.2 - 0.1;
                star.vy = Math.random() * 0.2 - 0.1;
            }

            star.y += star.vy;

            if (star.y >= WINDOW_HEIGHT) {

                star.y = 0;

                star.vy = Math.random() * 0.2 - 0.1;

                star.vx = Math.random() * 0.2 - 0.1;

            } else if (star.y < 0) {

                star.y = WINDOW_HEIGHT;

            }

            context.beginPath();

            var bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);

            bg.addColorStop(0, 'rgba(255,255,255,' + star.alpha + ')')

            bg.addColorStop(1, 'rgba(255,255,255,0)')

            context.fillStyle = bg;

            context.arc(star.x, star.y, star.r, 0, Math.PI * 2, true);

            context.fill();

            context.closePath();

        }

    }

    function addStar() {

        for (var i = 0; i < num; i++) {

            var aStar = {

                x: Math.round(Math.random() * WINDOW_WIDTH),

                y: Math.round(Math.random() * WINDOW_HEIGHT),

                r: Math.random() * 3,

                ra: Math.random() * 0.05,

                alpha: Math.random(),

                vx: Math.random() * 0.2 - 0.1,

                vy: Math.random() * 0.2 - 0.1

            }
            stars.push(aStar);
        }
    }
</script>
</body>
</html>
